<style scoped>
</style>
<template>
  <div>
    <Table
      stripe
      border
      :height="500"
      :columns="columns"
      :data="data"
      ref="tables"
      size="small"
      :tooltip-theme="menuTheme"
      :loading="loading"
    ></Table>
    <Page
      :total="totals"
      show-sizer
      :style="{padding:'15px'}"
      :page-size="sizes"
      @on-change="swichPage"
      @on-page-size-change="swichSize"
    />
    <Modal v-model="modal" title="执行历史" width="1312" footer-hide :mask-closable="false">
      <div
        :style="{color:'#fff',backgroundColor:'#000',padding:'10px',height:'600px',overflow:'auto', fontSize:'15px'}"
      >
        <div v-html="logDetails"></div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "LogList",
  props: {
    menuTheme: String,
    logKid: Number,
    logType: String,
  },
  data() {
    return {
      loading: true,
      columns: [
        {
          title: "序号",
          type: "index",
          width: 70,
          align: "center"
        },
        {
          title: "日志ID",
          width: 100,
          key: "logId",
          align: "center"
        },
        {
          title: "日志映射ID",
          key: "batchId",
          width: 100,
          align: "center"
        },
        {
          title: "抽取状态",
          key: "status",
          align: "center",
          width: 120,
          render: (h, params) => {
            if (params.row.status == 0) {
              return h(
                "Tag",
                {
                  props: {
                    color: "error",
                    type: "border"
                  }
                },
                "Error"
              );
            } else {
              return h(
                "Tag",
                {
                  props: {
                    color: "success",
                    type: "border"
                  }
                },
                "Success"
              );
            }
          }
        },
        {
          title: "抽取时间",
          align: "center",
          key: "createDate"
        },
        {
          title: "操作",
          width: 145,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.logDetail(params);
                    }
                  }
                },
                "详情"
              )
            ]);
          }
        }
      ],
      data: [],
      currentPage: 1,
      sizes: 20,
      totals: 0,
      modal: false,
      logDetails: ""
    };
  },
  methods: {
    //切换页码
    swichPage(page) {
      this.currentPage = page;
      this.getHistoryList(this.currentPage);
    },
    //切换每页容量
    swichSize(size) {
      this.sizes = size;
      this.getHistoryList(1);
    },
    //获取数据库列表
    async getHistoryList(pages) {
      const sizes = 20;
      const data = { pages, sizes };
      data.kid = this.logKid;
      data.logType=this.logType;
      const result = await this.$api.getHistoryList(data);
      this.loading = false;
      if (result.code === 1) {
        this.data = result.data.list;
        this.totals = result.data.total;
      }
    },
    logDetail: async function(e) {
      this.modal = true;
      const result = await this.$api.getHistoryDetail({ logId: e.row.logId });
      if (result.code === 1) {
        this.logDetails = result.data;
      }
    }
  },
  mounted() {
    console.log(this.logType);
    this.getHistoryList(1);
  }
};
</script>
